<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-03-08 14:33:44
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-09 15:49:37
 * @FilePath: \cxl-h5\src\pages\vehicleCondition\query\Index.vue
-->

<template>
    <section class="waiting">
        <section :class="['waiting-img', data.queryStatus ? '' : 'fail']">
            <img src="../../../assets/images/querying.png" v-if="data.queryStatus" alt="" />
            <img src="../../../assets/images/query-failed.png" v-else alt="" />
        </section>
        <template v-if="data.queryStatus">
            <h1>车况检测报告查询中，请耐心等候~</h1>
            <p>关闭当前页可在【报告记录】或【刷新】查看</p>
            <cxl-button type="primary" round @click="data.onRefresh">刷新</cxl-button>
            <span @click="data.onOpenHome">返回首页</span>
        </template>
        <template v-else>
            <h1>车况报告查询失败</h1>
            <p>已经将您支付查询的次数和金额原路退回。请注意查收退款。</p>
            <cxl-button type="primary" round @click="data.onOpenHome">返回首页</cxl-button>
        </template>
    </section>
</template>
<script setup lang="ts">
import { onUnmounted, reactive } from 'vue'
import { ReportQuery } from '.'

const data = reactive(new ReportQuery())

onUnmounted(() => {
    if (data.timer) {
        clearTimeout(data.timer)
    }
})
</script>
<style scoped lang="scss">
.waiting {
    width: 100%;
    height: 100vh;
    background-color: var(--cxl-color-white);
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    text-align: center;
    .query-fail {
        margin: 3.5rem auto;
    }
    .waiting-img {
        width: 15rem;
        height: 10rem;
        // background-image: url('../../../assets/images/css_sprites.png');
        // background-size: auto 10rem;
        // animation: move 1.5s steps(10, end) infinite;
        margin: 10rem auto 0 auto;

        img {
            display: block;
            width: 100%;
        }
    }
    h1 {
        font-size: var(--cxl-size-18);
        text-align: center;
        margin-top: var(--cxl-size-28);
    }
    p {
        color: var(--cxl-color-999999);
        font-size: var(--cxl-size-15);
        margin: var(--cxl-size-10) 0 var(--cxl-size-40) 0;
        text-align: center;
    }
    span {
        display: inline-block;
        margin-top: var(--cxl-size-16);
    }
}
@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -150rem 0;
    }
}
</style>
